<!-- 价格方案 -->
<template>
  <div class=''>
    <!-- 套餐 -->
    <section v-if="plans">
      <div class="fullW plans">
        <div class="globalTitle">
          <div class="title">{{ plans.title }}</div>
          <div class="subTitle" v-if="plans.subTitle">{{ plans.subTitle }}</div>
        </div>
        <img v-if="plans.img" :src="plans.img" @click="linkTo(plans.href)" class="img">
      </div>
    </section>
    <!-- 技术支持 -->
    <section v-if="service" class="sectionBg">
      <div class="fullW">
        <div class="globalTitle">
          <div class="title">{{service.title}}</div>
          <div class="subTitle" v-if="service.subTitle">{{service.subTitle}}</div>
        </div>
        <div class="service">
          <el-row :gutter="24">
            <el-col :span="8 " v-for="(item,index) in service.list" :key="index">
              <div class="item wow fadeInUpBig" :data-wow-duration="0.3*index+'s'" data-wow-delay="0.5s">
                <img :src="item.img" class="img">
                <div class="name">{{ item.name }}</div>
                <div class="text">{{ item.text }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </section>
    <!-- 常见问题 -->
    <section v-if="question">
      <div class="fullW">
        <div class="globalTitle">
          <div class="title">{{question.title}}</div>
          <div class="subTitle" v-if="question.subTitle">{{question.subTitle}}</div>
        </div>
        <div class="question">
          <el-row :gutter="24">
            <el-col :span="12 " v-for="(item,index) in question.list" :key="index">
              <div class="item wow fadeInUpBig" :data-wow-duration="0.3*index+'s'" data-wow-delay="0.5s">
                <div><img :src="item.img" class="img"></div>
                <div>
                  <div class="name">{{ item.name }}</div>
                  <div class="text">{{ item.text }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-button v-waves v-if="question.button" style="color: #1890FF;" type="text" @click="linkTo(question.button.href)">{{ question.button.name }}</el-button>
        </div>
      </div>
    </section>
    <!-- 体验DEMO -->
    <experience />
  </div>
</template>

<script>
// import { plans,service,question } from '@/static/data/proFunc.json'
import WOW from 'wowjs';
import { ALI_API } from '@/utils'
export default {
  async asyncData({ app, error, store }) {
    const response = await fetch(`${ALI_API}/kyb_office/proFunc.json`)
    return await response.json()
  },
  mounted(){
    let wow = new WOW.WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true,
      live: true
    });
    wow.init();
  },
  methods:{
    linkTo(href){
      if(href){
        if(href.startsWith('http')){
          window.open(href)
        }else{
          this.$router.push(href);
        }
      }
    },
  }
}
</script>
<style lang='scss' scoped>
@import '@/assets/css/variables.scss';
.fullW {
  padding-bottom: 100px;
}

.plans {
  .img {
    max-width: 100%;
  }
}

.service{
  overflow: hidden;
  .item{
    height: 214px;
    border-radius: 8px;
    padding: 32px 24px;
    background-color: #fff;
    margin-bottom: 24px;
    .img{
      height: 48px;
    }
    .name{
      height: 30px;
      font-size: 22px;
      font-weight: 600;
      margin: 16px 0;
    }
    .text{
      line-height: 22px;
      color: $use-color-info-light-3;
    }
  }
}

.question{
  overflow: hidden;
  .item{
    height: 204px;
    border-radius: 8px;
    border: 1px solid #EEF0F5;
    padding: 32px 24px;
    display: flex;
    margin-bottom: 30px;
    .img{
      margin-right: 32px;
    }
    .name{
      font-size: 22px;
      line-height: 30px;
      font-weight: 600;
    }
    .text{
      margin-top: 12px;
      line-height: 30px;
      color: $use-color-info-light-3;
    }
  }
}
</style>
